<template>
  <div class="employees">
      <Nav :navtitle="titles"></Nav>
      <div class="content" v-for="(item,index) in data" :key="index">
          <p class="one">
              <span>联系方式</span>
              <input type="text"   oninput="if(value.length>11)value=value.slice(0,11)" placeholder="手机号，此手机号将作为员工登录账号" class="input"> 
          </p>
           <div class="two">
              <span>员工</span>
                   <input type="text" placeholder="姓名" class="inputs">
            </div>
             <div class="three">
                 <div class="threeP">
                     <p class="three-one" @click="nan">
                            <span>先生</span>
                            <img src="../../assets/image/autotrophy.png" alt="" v-if="one">
                       </p>
                     <p class="three-one" @click="nv">
                            <span>女士</span>
                            <img src="../../assets/image/autotrophy.png" alt=""  v-if="two">
                       </p>
                 </div>
                       
                       
             </div>
            <p class="one" >
                <span>所属门店</span>
                <span class="input">{{item.storeName}}</span>
            </p>
      </div>
      <div class="bottom" @click="btn">
                  保存
       </div>
  </div>
</template>

<script>
import Nav from '../../components/Navbar'
import Vue from 'vue'
import { Dialog } from 'vant';
Vue.use(Dialog);
export default {
    components:{
       Nav
   },
   data(){
       return{
          titles:'新增员工',
          data:'',
          one:true,
          two:false,
       }
   },
  methods:{
      getListOfShopByGroupId(){
           let groupId=this.$store.state.userInfo.groupId
            let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
            this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getListOfShopByGroupId?groupId='+groupId,{},{headers})
            .then(res=>{
                console.log(res)
                this.data=res.data.result.items
                console.log(this.data)
            })
            .catch(err=>{
                console.log(err)
            })
      },
      nan(){
          if(this.one==true){
             this.one=!this.one
             this.two=!this.two
          }else{
              this.one=!this.one
               this.two=!this.two
          }
       },
         nv(){
          if(this.two==!true){
             this.two=!this.two
             this.one=!this.one
          }else{
               this.two=!this.two
             this.one=!this.one
          }
      },

      btn(){
         Dialog.alert({
            message: '请输入正确信息'
            }).then(() => {
            // on close
            });
      }
  },
  created(){
      this.getListOfShopByGroupId()
  }
}

</script>
<style scopde lang="scss">
.employees{
    width:100%;
}
.content{
    width:100%;
    font-size:0.13rem;
    .one{
        // width:100%;
        height:0.4rem;
        padding-left:0.1rem;
        border-bottom:0.01rem #f1f2f6 solid;
        display:flex;
        align-items:center;
        box-sizing:border-box;
        .input{
            flex:1;
            border-style: none;
            margin-left:0.1rem;
             margin-top: 0.03rem;
        }
    }
    .two{
        // width:100%;
        height:0.4rem;
        padding-left:0.1rem;
        display:flex;
        align-items:center;
        box-sizing:border-box;
         .inputs{
            flex:1;
            height:0.4rem;
            border-style: none;
            margin-left:0.4rem;
            margin-top: 0.03rem;
            border-bottom:0.01rem #f1f2f6 solid;
        }
    }
    .three{
            padding-left:0.1rem;
            // width: 100%;
            height:0.4rem;
            border-bottom:0.01rem #f1f2f6 solid;
            display:flex;
            align-items:center;
                .threeP{
                    padding-left:0.6rem;
                    display: flex;
                    flex-direction: row;
                    .three-one{
                            font-size:0.12rem;
                            border:0.01rem solid #ccc;
                            border-radius:0.05rem;
                            padding:0.06rem 0.19rem;
                            position: relative;
                            margin-left:0.1rem;
                            img{
                                width:0.13rem;
                                height:0.13rem;
                                position: absolute;
                                top:0;
                                right:0;
                            }
                    }
                }
    }
}
.bottom{
       width:100%;
        height:0.35rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position:fixed;
        bottom:0;
        left:0;
        z-index:99;
        background-color:#d33;
        font-size:0.15rem;
        color:white;
        box-sizing:border-box;
}
</style>